<template>
	<view>
		<view class="lb-tabs">
			<u-tabs :list="tabsData" :current="current" @click="clickTabs" lineWidth="18" lineColor="#00D26E"
				:activeStyle="{
			            color: '#00D26E',
						fontSize: '24rpx',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#333333',
						fontSize: '24rpx',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>

		<!-- main -->
		<view class="lb-main-32">
			<!-- 列表 -->
			<u-empty v-if="listData.length < 1" mode="order" icon="/static/empty/order.png">
			</u-empty>
			<!-- @click="goTo('/pages/jia-kao/order-detail/order-detail?order_id=' + item.id)" -->
			<view class="lb-box" v-for="(item,index) in listData" :key="index">
				<view class="box-top">
					<text>{{item.order_number}}</text>
					<text>{{tabsData[item.status].name}}</text>
				</view>

				<view class="box-item" v-if="item.goods">
					<view class="item-left">
						<image :src="getImgUrl(item.goods.cover_image)" mode=""></image>
					</view>
					<view class="item-right">
						<view class="info">
							<view class="name">
								{{item.goods.name}}
							</view>
							<view class="price">
								{{item.total_price}}
							</view>
						</view>
					</view>
				</view>

				<view class="box-foot" @click.stop="">
					<view class="text">实付款：￥{{item.price}}</view>
					<view class="f-btn">
						<view class="f-bt1" v-if="current == 0" @click="cancel(item)">
							取消订单
						</view>
						<view class="f-bt" v-if="current == 0"
							@click="goTo('/pages/jia-kao/order-payment/order-payment?id=' + item.id)">
							立即支付
						</view>
						<view class="f-bt" v-else-if="current == 2" @click="take(item)">
							确认收货
						</view>
						<view class="f-bt" v-else-if="current == 3 "
							@click="goTo('/pages/xi-hu/evaluate/evaluate?type=2&id=' + item.id)">
							去评价
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		travelOrderList,
		orderApiCancel,
		orderApiTake,
		orderApiFlaw
	} from "@/api/apis/wash.js"
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				current: 0,
				tabsData: [{
					name: '待付款',
				}, {
					name: '已支付'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已完成'
				}],
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false
			}
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading) {
				this.getList();
			}

		},
		methods: {
			//取消订单
			cancel(item) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您是否确认取消？',
					success: e => {
						if (e.confirm) {
							uni.showLoading({
								title: "加载中",
								mask: true
							});
							orderApiCancel({
								order_id: item.id,
								type: 2
							}).then((res) => {
								uni.hideLoading();
								if (res.code == 1) {
									_this.$u.toast('取消成功!');
									setTimeout(() => {
										_this.page = 1;
										_this.getList();
									}, 1000)
								}
							})
						} else {

						}
					}
				})
			},
			//确认瑕疵
			flaw(item) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您是否确认取消？',
					success: e => {
						if (e.confirm) {
							uni.showLoading({
								title: "加载中",
								mask: true
							});
							orderApiFlaw({
								order_id: item.id
							}).then((res) => {
								uni.hideLoading();
								if (res.code == 1) {
									_this.$u.toast('确认成功!');
									setTimeout(() => {
										_this.page = 1;
										_this.getList();
									}, 1000)
								}
							})
						} else {

						}
					}
				})
			},
			//确认收货
			take(item) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您是否确认收货？',
					success: e => {
						if (e.confirm) {
							uni.showLoading({
								title: "加载中",
								mask: true
							});
							orderApiTake({
								order_id: item.id,
								type: 2
							}).then((res) => {
								uni.hideLoading();
								if (res.code == 1) {
									_this.$u.toast('确认成功!');
									setTimeout(() => {
										_this.page = 1;
										_this.getList();
									}, 1000)
								}
							})
						} else {

						}
					}
				})
			},
			//查看衣物
			isShow(is_show, i, index) {
				this.listData[index].detail[i].is_show = !is_show;
				this.$forceUpdate();
			},
			//地址
			getImgUrl(url) {
				return setImgUrl(url);
			},
			//切换tabs
			clickTabs(item) {
				// console.log('item', item);
				this.current = item.index;
				this.page = 1;
				this.listData = []
				this.getList();
			},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			//获取列表
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				travelOrderList({
					status: this.current,
					page: this.page,
					limit: this.limit,
				}).then(res => {
					uni.hideLoading();
					if (this.page == 1) {
						this.listData = res.data.data;
					} else {
						this.listData = this.listData.concat(res.data.data);
					}
					if (res.data.total >= this.page * this.limit) {
						//请求成功 节流阀 设置为false（没有走完函数不允许再次请求）
						this.isLoading = false;
						this.page++;
					}
				})
			},
		},
		onLoad(options) {
			if (options.current)
				this.current = options.current;
			this.getList()
		}
	}
</script>

<style lang="scss">
	//商品
	.lb-goods {
		position: relative;
		display: flex;
		flex-direction: column;
		// box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		padding: 0 32rpx 12rpx;
		box-sizing: border-box;


		.g-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 14rpx 0;

			.g-left {
				display: flex;
				align-items: center;
				flex: 1;

				.img {
					width: 80rpx;
					height: 80rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
					border-radius: 8rpx;
				}

				.name {
					font-size: $main-font-28;
					font-weight: 400;
					color: $main-font-color;
					padding-left: 24rpx;
					flex: 1;
				}
			}

			.g-right {
				font-size: $main-font-28;
				font-weight: 400;
				color: #F65D40;

				&::before {
					content: '¥';
					font-size: $main-font-24;
				}
			}
		}
	}

	//状态
	.lb-tabs {
		background-color: #F5F5F5;
		position: sticky;
		top: 0;
		z-index: 1;
		padding-bottom: 5rpx;

	}

	.btn {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;

		.bt {
			width: 130rpx;
			height: 48rpx;
			border: 2rpx solid #999999;
			border-radius: 24rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: $main-font-24;
			font-weight: 400;
			color: $main-font-color-grey9;
		}
	}

	//列表
	.lb-box {
		width: 100%;
		// height: 780rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.box-top {
			padding: 26rpx 32rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #F5F5F5;

			text {
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color;

				&:nth-of-type(2) {
					color: #00D26E;
				}
			}

		}

		.box-item {
			display: flex;
			flex-direction: row;
			padding: 24rpx 24rpx 12rpx;
			box-sizing: border-box;
			// margin-bottom: 24rpx;

			.item-left {
				width: 160rpx;
				height: 160rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					// width: 113rpx;
					// height: 132rpx;
					border-radius: 16rpx;
				}
			}

			.item-right {
				width: calc(100% - 160rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 24rpx;


				.info {
					font-size: $main-font-28;
					font-weight: 400;

					.name {
						color: $main-font-color;
					}

					.price {
						color: #F65D40;
						padding-top: 12rpx;

						&::before {
							content: '¥';
							font-size: $main-font-24;
						}
					}
				}


			}
		}

		.box-more {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 0 32rpx 12rpx;
		}

		.box-foot {
			padding: 26rpx 32rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-top: 2rpx solid #F5F5F5;

			.text {
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color;

			}

			.f-btn {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;

				.f-bt1 {
					width: 130rpx;
					height: 48rpx;
					border: 2rpx solid #CCCCCC;
					background: rgba(245, 245, 245, 0.39);
					border-radius: 24rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: $main-font-24;
					font-weight: 400;
					color: $main-font-color-grey6;
					margin-right: 24rpx;
				}

				.f-bt {
					width: 130rpx;
					height: 48rpx;
					border: 2rpx solid #F65D40;
					background: linear-gradient(104deg, #F7583F 0%, #F28F4C 100%);
					border-radius: 24rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: $main-font-24;
					font-weight: 400;
					color: $main-font-color-white;

				}
			}

		}
	}
</style>